<template>
  <div id="home">
    <home-swiper></home-swiper>
    
    <Introduce>
      <div slot="left" class="inc l">
        <div class="inner">
          <my-circle text1="宝芝堂药业" text2=""></my-circle>
          <my-circle text1="宝芝堂药业" text2="" size="232" left="280" top="90"></my-circle>
          <my-circle text1="宝芝堂药业" text2="" size="145" left="440" top="13"></my-circle>
          <my-circle text1="宝芝堂药业" text2="" size="212" left="60" top="330"></my-circle>
          <my-circle text1="宝芝堂药业" text2="" size="164" left="351" top="413"></my-circle>
          <my-circle text1="" text2="" size="88" left="564" top="303"></my-circle>
          <my-circle text1="" text2="" size="127" left="-35" top="320"></my-circle>
        </div>
      </div>
      <div slot="right" class="inc r">
        <div class="inner">
          <div class="cans-list">
            <div class="cans-list-item" v-for="item in cansList" :key="item.url">
              <div class="img">
                <img :src=item.cansImgUrl alt="">
              </div>
              <div class="info">
                <h2 class="info-title">{{item.canTitle}}</h2>
                <div class="info-content">{{item.canInfo}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Introduce>
  </div>
</template>

<script>
import HomeSwiper from '@/views/homeViews/home/components/HomeSwiper.vue';
import Introduce from '@/components/content/introduce/Index';
import MyCircle from './components/Circle';
import Bg from '@/components/content/bgContainer/Index';

export default {
  name: 'Index',
  data() {
    return {
      cansList: [
        {
          cansImgUrl: require('../../../assets/img/icon2_2.png'),
          canTitle: '企业宗旨 让利于民 福惠百姓',
          canInfo: ''
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_2.png'),
          canTitle: '企业宗旨 让利于民 福惠百姓',
          canInfo: ''
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_2.png'),
          canTitle: '经营理念 以人为本 诚信服务',
          canInfo: ''
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_2.png'),
          canTitle: '企业精神 艰苦奋斗 诚实守信 奋发向上 敬业感恩',
          canInfo: ''
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_2.png'),
          canTitle: '企业作风 自觉自律 精益求精',
          canInfo: ''
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_2.png'),
          canTitle: '公司纲领 奉献社会 发展进步',
          canInfo: ''
        },
        {
          cansImgUrl: require('../../../assets/img/icon2_2.png'),
          canTitle: '管理纲领 目标 流程 执行力',
          canInfo: ''
        }
      ],
    };
  },
  components: {
    HomeSwiper,
    Introduce,
    MyCircle,
    Bg
  }
};
</script>

<style scoped lang="less">
#home {
  .inc {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: relative;
    .inner {
      width: 593px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -296px 0 0 -296px;
    }
  }
  .l {
    background: url('../../../assets/img/bg2a.jpg') no-repeat center;
  }
  .r {
    background: url('../../../assets/img/bg2b.jpg') no-repeat center;
  }
  .cans-list{
    .cans-list-item{
      display: flex;
      color: #ffffff;
      align-items: center;
      margin: 50px 0;
      .img{
        width: 55px;
        height: 50px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        margin-left: 30px;
        .info-title{
          font-family: 'Heiti SC', Arial;
          color: #ffffff;
        }
        .info-content{
          margin-top: 15px;
          font-size: 14px;
        }
      }
    }
  }
  .xuanba{
    width: 1200px;
    margin: 30px auto;
    h1{
      text-align: center;
    }
    .text{
      text-align: center;
      font-size: 20px;
    }
    .pic{
      width: 100%;
      margin-top: 30px;
      img{
        width: 100%;
      }
    }
  }
}
</style>
